{% extends 'article/base.html' %}
{% load static %}
{% block title %}article column{% endblock %}
{% block content %}
    <div>
    <p class="text-right"><button class="btn btn-primary" id="add_column" onclick="add_column()">add column</button> </p>
    <table class="table table-hover">
        <tr>
            <td>序号</td>
            <td>栏目名称</td>
            <td>操作</td>
        </tr>
        {% for column in columns %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ column.column }}</td>
                <td>
                    <a name="edit" href="javascript:" onclick="edit_column(this, {{ column.id }})">
                        <span class="glyphicon glyphicon-pencil"></span>
                    </a>
                    <a name="delete" href="javascript:" onclick="del_column(this, {{ column.id }})">
                        <span class="glyphicon glyphicon-trash" style="margin-left: 5px"></span>
                    </a>
                </td>
            </tr>
            {% empty %}
            <p>还没有设置栏目，太懒了。</p>
        {% endfor %}
    </table>
    </div>

    <script type="text/javascript" src="{% static 'js/jquery-3.2.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
    <script type="text/javascript">
    function add_column() {
        var index = layer.open({
            type:1,
            skin:"layui-layer-rim",
            area: ["400px", "200px"],
            title: "新增栏目",
            content: '<div class="text-center" style="margin-top:20px">' +
                '<p>请输入新的栏目名称</p>' +
                '<p>{{ column_form.column }}</p>' +
                '</div>',
            btn: ["确定", "取消"],
            yes: function (index, layero) {
                column_name = $('#id_column').val();
                $.ajax({
                    url: '{% url "article:article_column" %}',
                    type: "POST",
                    data:{"column": column_name},
                    success: function (e) {
                        if(e == "1") {
                            parent.location.reload();
                            layer.msg("good");
                        }else{
                            layer.msg("此栏目已有, 请更换名称")
                        }
                    }
                })
            },
            btn2: function (index, layero) {
                layer.close(index);
            },
        });
    }

    function edit_column(the, column_id) {
        var name = $(the).parents("tr").children("td").eq(1).text();
        var index = layer.open({
            type:1,
            skin:"layui-layer-rim",
            area: ["400px", "200px"],
            title: "编辑栏目",
            content: '<div class="text-center" style="margin-top:20px">' +
                '<p>请编辑栏目名称</p>' +
                '<p><input type="text" id="new_name" value="' + name + '"></p>' +
                '</div>',
            btn: ["确定", "取消"],
            yes: function (index, layero) {
                new_name = $("#new_name").val();
                $.ajax({
                    url: "{% url 'article:rename_article_column' %}",
                    type: "POST",
                    data: {"column_id": column_id, "column_name": new_name},
                    success: function (e) {
                        if (e == "1") {
                            parent.location.reload();
                            layer.msg("good");
                        }else{
                            layer.msg("新的名称没有保存，修改失败。")
                        }
                    },
                });
            },
        });
    }

    function del_column(the, column_id) {
        var name = $(the).parents("tr").children("td").eq(1).text();
        var index = layer.open({
            type:1,
            skin:"layui-layer-rim",
            area: ["400px", "200px"],
            title: "删除栏目",
            content: '<div class="text-center" style="margin-top:20px">' +
                '<p>是否决定删除{' + name + '}栏目</p>' +
                '</div>',
            btn: ["确定", "取消"],
            yes: function (index, layero) {
                new_name = $("#new_name").val();
                $.ajax({
                    url: "{% url 'article:del_article_column' %}",
                    type: "POST",
                    data: {"column_id": column_id},
                    success: function (e) {
                        if (e == "1") {
                            parent.location.reload();
                            layer.msg("good");
                        }else{
                            layer.msg("新的名称没有保存，修改失败。")
                        }
                    },
                });
            },
        });
    }
    </script>
{% endblock %}